<template>
	<view class="content">
		<view>
			犬只名称
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="name" placeholder="请输入犬只名称" />
		<view>
			身份证号（法人身份证号）
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="idCard" placeholder="请输入身份证号" />
		<view @tap="go" class="btn"><button type="default" style="background-color:#fcd700;">查询</button></view>
		<view class="tip" v-if="Data">
			{{Data}}
			<view>
				<text class="text">犬主姓名:</text>
				{{ Data.userName }}
			</view>
			<view>
				<text class="text">是否符合条件:</text>
				{{ Data.examine }}
			</view>

			<view>
				<text class="text">原因:</text>
				{{ Data.shyj }}
			</view>

			<button v-show="isJian" @tap="guan" type="primary" style="background-color:#fcd700;padding: 0 60upx;">前往年检</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import CHONG from '../../static/js/function.js';
export default {
	computed: mapState(['URL']),
	data() {
		return {
			name: '',
			idCard: '',
			Data: '',
			isJian: false //是否符合年检
		};
	},
	methods: {
		go() {
			console.log(this.URL);
			let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

			if (!this.name) {
				CHONG.tip('请填写犬只名称', 1);
				return;
			} else if (!this.idCard) {
				CHONG.tip('请填写身份证号', 1);
				return;
			} else if (!idcardReg.test(this.idCard)) {
				CHONG.tip('请填写正确格式的身份证号', 1);
				return;
			}
			CHONG.tip('查询中', 0);
			let data = {
				name: this.name, // "name": "犬只名称",
				idCard: this.idCard // "idCard": "身份证号"
			};
			
			// 模拟数据
			var json = {
				isJian: true,
				userName: '李二狗',
				examine: '符合',
				shyj: '无',
				type:'enterprise',//enterprise
			};
			// json = {
			// 	isJian: false,
			// 	userName: '李二狗',
			// 	examine: '不符合',
			// 	shyj: '您的犬只有处罚尚未处理，请前往个人中心查看并尽快处理'
			// };
			this.Data = json;
			this.isJian = json.isJian; //后台回显 年检按钮
			uni.hideLoading();
			// 模拟数据

			uni.request({
				url: this.URL + 'applying',
				data: data,
				success: res => {
					if (!res.data.success) {
						CHONG.tip(res.data.msg);
					}
					let json = res.data.data[0];
					if (!json.status) {
						CHONG.tip(json.msg);
						return;
					}
					console.log('审核信息');
					console.log(json);
					this.Data = json;
					this.isJian = json.isJian; //后台回显 年检按钮
					uni.hideLoading();
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		guan() {
			// this.Data = null;
			// this.name = '';
			// this.idCard = '';
			if(this.Data.type === 'personal'){
				uni.redirectTo({
					url: 'gr_yearlyInspection'
				});
			}else if(this.Data.type === 'enterprise'){
				uni.redirectTo({
					url: 'qy_yearlyInspection'
				});
			}
			
		}
	}
};
</script>

<style lang="scss">
.content {
	font-size: 26upx;
	padding: 20upx;

	input {
		color: $chong-text-color;
		font-size: 24upx;
		margin: 10upx 0;
		padding: 4upx 20upx;

		border: {
			radius: 10upx;
			style: solid;
			width: 1upx;
			color: rgba($chong-text-color, 0.2);
		}

		background: white;
	}

	.btn {
		padding: 50upx 0;
		margin: 0 140upx;
	}

	.huang {
		color: $chong-iconbg-color;
	}

	.tip {
		width: 690upx;
		height: 500upx;
		position: relative;
		top: -200upx;
		background: white;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 20upx;
		box-shadow: 0px 6px 5px 0px #d1d1d1;
		font-size: 36upx;
		border-radius: 20upx;

		.text {
			color: #888;
			padding-right: 10upx;
		}
	}
}
</style>
